<template>
	<div class="about">
		<div id="render">
			<div v-html="template"></div>
		</div>
		<p>{{answer}}</p>
		<button @click="answer=[]">clear</button>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		created() {

		},
		data() {
			return {
				template: '<div ><input type="text" v-model="answer[0]"><br/><input type="text" v-model="answer[1]"></div>',
				message: 'Hello, World!',
				answer: null
			}
		},
		mounted() {
			setTimeout(() => {
				this.rerender();
			}, 1000)
		},
		methods: {

			rerender() {
				this.answer = ["", ""]
				// this.$data.answer = ["", ""]
				var el = document.getElementById("render")
				const compiled = Vue.compile(this.template)
				const vm = new Vue({
					data: this.$data,
					render: compiled.render,
					staticRenderFns: compiled.staticRenderFns
				}).$mount()

				el.innerHTML = "";
				el.appendChild(vm.$el)
			}
		}

		// directives: {
		// 	render: {

		// 		// 指令的定义
		// 		inserted: function(el,payload) {
		// 			var self = this;
		// 			console.log(self,payload);


		// 		}
		// 	}
		// }
	}
</script>
